<template>
  <div id="contact">
      <img src="https://cdn.swellpro.com/newSite/pc/Contacting%20SwellPro.jpg" alt="Contacting-SwellPro">

      <div class="container">
          <h1>Contacting Swellpro</h1>

          <!-- <div class="select">
              <div v-for="(type, index) in types" :key="index" @click="enter(type.id)" :class="['item', {'item__active': selected_type === type.id}]">
                  {{type.name}}
              </div>
          </div> -->

          <div id="form">
                <!-- <p class="form-title">Contact Detail</p>
                <transition name="fade">
                    <div v-if="selected_type === 2">
                        <kv class="kv_pad" :title="'Type'">
                            <select v-model="form.support_type">
                                <option :value="type" v-for="(type, index) in support_types" :key="'support' + index">
                                    {{type}}
                                </option>
                            </select>
                        </kv>
                    </div>
                </transition>
                <Row>
                    <Col span="24">
                        <kv class="kv_pad" :title="'Country'">
                            <select v-model="form.country">
                                <option :value="country" v-for="(country, index) in countrys" :key="'country' + index">
                                    {{country}}
                                </option>
                            </select>
                        </kv>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                        <kv class="kv_pad" :title="'First Name'">
                            <Input v-model="form.first_name"></Input>
                        </kv>
                    </Col>
                    <Col span="12">
                        <kv class="kv_pad" :title="'Last Name'">
                            <Input v-model="form.last_name"></Input>
                        </kv>
                    </Col>
                </Row>
                <kv class="kv_pad" :title="'Phone'">
                    <Row>
                       <Col :span="24">
                            <Input v-model="form.phone"></Input>
                       </Col>
                    </Row>
                </kv>
                <kv class="kv_pad" :title="'Email'">
                    <Row>
                        <Col :span="24">
                            <Input v-model="form.email"></Input>
                        </Col>
                    </Row>
                </kv>
                <kv class="kv_pad" :title="'Message'">
                    <Row>
                        <Col :span="24">
                            <textarea rows="5" cols="20" v-model="form.message">
                            </textarea>
                        </Col>
                    </Row>
                </kv>

                <button @click="submit">SUBMIT</button> -->

                <!-- <p class="form-title">Other Ways To Contact Us</p> -->

                <Row>
                    <Col :span="6" v-for="(text, index) in texts" :key="'text' + index" style="padding-bottom: 30px">
                        <p :class="{'text_active': !((index + 1) & 1)}">{{text}}</p>
                    </Col>
                </Row>
          </div>
      </div>

      <Message v-model="message" :status="icon_status" v-if="isShowMessage" @close="() => { this.isShowMessage = false }"></Message>

      <!-- 选择弹窗 -->
      <Modal :isShow.sync="isShowModal">
          <div class="select">
              <div :class="['item', {'item__active': selected_type === type.id}]" v-for="(type, index) in types" :key="index" @click="enter(type.id)">
                  {{type.name}}
              </div>
          </div>
      </Modal>
  </div>
</template>
<script>
import Http from '~/plugins/http'
import Modal from '~/components/pc/modal'
import Kv from '~/components/pc/kv'
import Row from '~/components/pc/row'
import Col from '~/components/pc/col'
import Input from '~/components/pc/input'
import Message from '~/components/pc/message'
export default {
  data () {
    return {
        icon_status: '',
        message: '', // 提示信息
        isShowMessage: false, // 是否展示信息
        form: {
            first_name: '',
            last_name: '',
            phone: '',
            email: '',
            message: '',
            country: ''
        },
        texts: ['Purchasing & Order Support', 'onlinestore@swellpro.com', 'Technical Support', 'support@swellpro.com', 'Distribution & Reseller', 'info@swellpro', 'Marketing & Partnerships&PR', 'marketing@swellpro.com', 'Phone', '+86 0755-86622175', 'Office Hour', '09.00 - 12.00, 13.30 - 18.00(PST),Monday To Friday', 'Address', 'Room 905, 9th floor, Building A,No 2, Innovation Valley, No 8, Shiyan Tangtou Road, Baoan, Shenhen'],
        support_types: ['Issue', 'Repairment', 'Replacement'],
        countrys: ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Anguilla", "Antigua & Barbuda", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia & Herzegovina", "Botswana", "Brazil", "British Virgin Islands", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo - Kinshasa", "Cook Islands", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Falkland Islands", "Faroe Islands", "Fiji", "Finland", "France", "French Guiana", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada", "Guadeloupe", "Guatemala", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hungary", "Iceland", "India", "Indonesia", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau SAR China", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Martinique", "Mauritania", "Mauritius", "Mayotte", "Mexico", "Monaco", "Mongolia", "Montserrat", "Morocco", "Mozambique", "Myanmar (Burma)", "Namibia", "Nauru", "Nepal", "Netherlands", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Niue", "North Korea", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Réunion", "Romania", "Rwanda", "Samoa", "San Marino", "São Tomé & Príncipe", "Saudi Arabia", "Senegal", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Korea", "Spain", "Sri Lanka", "Suriname", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Timor-Leste", "Togo", "Tonga", "Trinidad & Tobago", "Tunisia", "Turkey", "Turks & Caicos Islands", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"],
        input_value: '',
        selected_type: -1,
        isShowModal: false,
        types: [
            {
                id: 1,
                name: 'Purchasing & Order Support'
            },
            {
                id: 2,
                name: 'Technical Support'
            },
            {
                id: 3,
                name: 'Marketing & Partnerships'
            },
            {
                id: 4,
                name: 'Other'
            },
        ]
    };
  },

  head() {
    return {
        title: '',
        meta: [
            { hid: 'description', name: 'description', content: ''},
        ]
    }
  },

  components: { Modal, Kv, Row, Col, Input, Message },

  watch: {
      // 表单类型开始变化
      selected_type(value) {
          this.resetform(value)
      }
  },

  computed: {},

  mounted() {},

  methods: {
      resetform(value) {
          const obj = {
                first_name: '',
                last_name: '',
                phone: '',
                email: '',
                message: '',
                country: ''
          }
          if (value === 2) {
              const key = 'support_type'
              obj[key] = ''
          }
          this.form = obj
      },

      enter(id) {
          this.isShowModal = false
          this.selected_type = id
      },

      // 提交表单数据
      async submit() {
          let flag = true
          const keys = Object.keys(this.form)

          for (let i = 0; i < keys.length; i++ ) {
              if (this.form[keys[i]] === '' || (keys[i] === 'email' && !/^([\w-_]+(?:\.[\w-_]+)*)@((?:[a-z0-9]+(?:-[a-zA-Z0-9]+)*)+\.[a-z]{2,6})$/i.test(this.form[keys[i]]))) {
                  flag = false
                  this.openMessage(keys[i] + `${keys[i] === 'email' ? ` format error!` : ` can't be empty!`}`)
                  return
              }
          }

          if (!flag) {
              return
          }

          const {
              http,
              api: { contact_detail }
          } = Http



          const { data, error } = await http.request(contact_detail, [this.selected_type], this.form)

          if (!error) {
              this.openMessage('The message has been sent. We will reply very soon.', 'success')
              this.resetform(this.selected_type)
          } else {
              this.openMessage(error)
          }
      },

      // 打开弹窗
      openMessage(message, status = '') {
          this.icon_status = status
          this.message = message
          this.isShowMessage = true;
      }
  }
}

</script>
<style lang='stylus' scoped>
.select
    width 85%
    margin 0 auto
    display flex
    flex-flow row wrap
    justify-content space-between
    margin-bottom 30px
    .item
        flex 0 0 48% 
        text-align center
        line-height 80px
        border 1px solid rgba(0,0,0,.3)
        border-radius 10px
        margin-bottom 30px
        cursor pointer
        transition all .3s
        &:hover
            background #f26444
            color #fff
            border-width 0px
        &__active
            background #f26444
            color #fff
            border-width 0px
#contact
    background rgba(158, 158, 158, .3)
    img
        display block
        width 100%
    .container
        padding-bottom 60px
        width 1100px
        min-height 100px
        background #fff
        h1
            text-align center
            font-weight 400
            font-size 24px
            line-height 120px
        .select
            margin-bottom 0px
            .item
                flex 0 0 23.4%
                line-height 60px
                margin-bottom 50px
        #form
            width 85%
            margin 0 auto
.kv_pad
    padding-bottom 13px
textarea,select
    display block
    width 100%
    line-height 1.5
    padding 4px 7px
    font-size 12px
    border 1px solid #dcdee2
    border-radius 4px
    color #515a6e
    background-color #fff
    background-image none
    position relative
    outline none
    cursor text
    font-weight 300
    box-sizing border-box
    transition border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out
    &:focus
        border-color #f26444
select
    height 40px
#form
    button
        font-weight 300
        display block
        width 30%
        padding 10px 0px
        background rgb(242, 100, 68)
        margin 20px auto 60px
        border-radius 20px
        color rgb(255, 255, 255)
        text-align center
        font-size 20px
        cursor pointer
        transition all .3s
        border 1px solid rgb(242, 100, 68)
        &:hover
            background #fff
            color rgb(242, 100, 68)
.fade-enter-active, .fade-leave-active
    transition all .3s
.fade-enter, .fade-leave-active
    opacity 0
    transform scale(0)
.form-title
    font-weight 400
    padding-bottom 20px
    font-size 20px
.text_active
    color #2e78ca
</style>